<template>
  <div class="area"></div>
</template>

<script>
export default {
  name: "areaChart",
  props: ["config", "selectRangeDate"],
  data() {
    return {};
  },
  methods: {
    
    setData(type) {
      let arr = [];
      switch (type) {
        case "x":
          for (let i = 0; i < this.selectRangeDate.length; i++) {
            arr.push(
              this.selectRangeDate[i][1] + "." + this.selectRangeDate[i][2]
            );
          }
          break;
        case "s":
          for (let i = 0; i < this.selectRangeDate.length; i++) {
            arr.push((Math.random() * 250).toFixed(0));
          }
          break;

        default:
          break;
      }

      return arr;
    },
    setSeriesData() {
      let arr = [];
      this.config.data.forEach((item) => {
        let obj = {
          name: item.name,
          type: "line",
          smooth: true,
          symbol: "none",
          areaStyle: {
            opacity: 1,
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: item.color[0], // 0% 处的颜色
                },
                {
                  offset: 0.4,
                  color: item.color[0], // 40% 处的颜色
                },
                {
                  offset: 1,
                  color: item.color[1], // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
            // color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //     offset: 0, color: item.color[0] // 0% 处的颜色
            // },
            //     {
            //         offset: 0.4, color: item.color[0] // 0% 处的颜色
            //     }, {
            //         offset: 1, color: item.color[1] // 100% 处的颜色
            //     }]), //背景渐变色
            // origin: 'start'
          },
          lineStyle: {
            width: 0,
          },
          itemStyle: {
            color: item.color[0],
          },
          data: this.setData("s"),
        };
        arr.push(obj);
      });
      return arr;
    },
    setChart() {
      console.log(this.config);
      let option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(11, 41, 116, 0.2)",
          borderColor: "rgba(11, 41, 116, 0.2)",
          textStyle: {
            color: "#D6E1FF",
          },
        },
        grid: {
          //   top: 0,
          //   left: 0,
          //   right: 0,
          //   bottom: 0,
          //   containLabel: false
        },
        toolbox: {
          show: false,
        },
        xAxis: {
          type: "category",
          boundaryGap: false, //坐标轴两边留白
          data: this.config.xdata,
          axisLabel: {
            textStyle: {
              color: "#D6E1FF",
              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              color: "#9EA3B4",
              opacity: 0.3,
            },
          },
          axisTick: {
            show: false,
          },
        },
        legend: [
          {
            right: "10",
            top: "-5",
            itemWidth: 7,
            itemHeight: 7,
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位：次",
            nameTextStyle: {
              color: "#fff",
            },
            splitNumber: 5,
            splitLine: {
              lineStyle: {
                color: "#9EA3B4",
                opacity: 0.1,
              },
            },
            axisLabel: {
              textStyle: {
                color: "#D6E1FF",
              },
            },
          },
        ],
        series: [
          {
            emphasis: {
              focus: "series",
            },
            type: "line",
            name: this.config.data.series[0].name,
            stack: "Total",
            symbol: "none",
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#5B8FF9", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#fff", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
            itemStyle: {
              normal: {
                color: "#5B8FF9",
                lineStyle: {
                  color: "#5B8FF9",
                  width: 2,
                },

                areaStyle: {
                  itemStyle: {
                    normal: {
                      areaColor: "#5B8FF9",
                      borderColor: "#111",
                    },
                    emphasis: {
                      areaColor: "#5B8FF9",
                    },
                  },
                },
              },
            },
            toolbox: {
              show: false,
            },
            data: this.config.data.series[0].data,
          },
          {
            emphasis: {
              focus: "series",
            },
            type: "line",
            stack: "Total",
            name: this.config.data.series[1].name,
            symbol: "none",
            itemStyle: {
              normal: {
                color: "#db7289",
                lineStyle: {
                  color: "#db7289",
                  width: 2,
                },

                areaStyle: {
                  itemStyle: {
                    normal: {
                      areaColor: "#db7289",
                      borderColor: "#111",
                    },
                    emphasis: {
                      areaColor: "#db7289",
                    },
                  },
                },
              },
            },
            toolbox: {
              show: false,
            },
            data: this.config.data.series[1].data,
          },
          {
            emphasis: {
              focus: "series",
            },
            type: "line",
            stack: "Total",
            name: this.config.data.series[2].name,
            symbol: "none",
            itemStyle: {
              normal: {
                color: "#ff9800",
                lineStyle: {
                  color: "#ff9800",
                  width: 2,
                },

                areaStyle: {
                  itemStyle: {
                    normal: {
                      areaColor: "#db7289",
                      borderColor: "#ff9800",
                    },
                    emphasis: {
                      areaColor: "#ffd200",
                    },
                  },
                },
              },
            },
            toolbox: {
              show: false,
            },
            data: this.config.data.series[2].data,
          },
        ],
      };

      //   if (this.selectRangeDate.length > 7) {
      //     option.xAxis.axisLabel.interval = 3;
      //     option.xAxis.axisLabel.showMaxLabel = false;
      //     option.xAxis.axisLabel.align = "left";
      //   }
      let myChart = this.$echarts(this.$el);

      myChart.clear();
      myChart.resize({
        width: this.$el.offsetWidth,
        height: this.$el.offsetHeight,
      });
      myChart.setOption(option);
    },
  },
  mounted() {
    this.setChart();
  },
};
</script>

<style lang="less" scoped>
.area {
  width: 100%;
  height: 100%;
}
</style>
